<template>
  <view>
    <view class="main b">
      <view class="cell">
        <view class="left">
          <image src="../../static/home/sc.png" mode="aspectFill" />
          上传到
        </view>
        <view class="right" @click="showPic">
          <text>{{ activeInfo?.name }}</text>
          <image :src="activeInfo?.url" mode="aspectFill" />
          <u-icon v-if="!filesInfo" name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="cell2"> 图片/视频 </view>
    </view>
    <u-picker :show="show" keyName="name" :columns="fileList" @cancel="show = false" @confirm="selectClick"></u-picker>
    <view class="main">
      <view class="imgBox">
        <view class="empty" v-for="(item, index) in picList" :key="index">
          <image
            v-if="isImageOrVideo(item.path) === 'image'"
            @click="
              TanPreviewImage(
                picList.map((i: any) => i.url),
                index
              )
            "
            :src="item.url"
            mode="aspectFill"
          />
          <video v-if="isImageOrVideo(item.path) === 'video'" :show-play-btn="true" :show-fullscreen-btn="true" :src="item.url"></video>
          <view class="closeBox" @click="closeFn(index)">
            <u-icon name="close"></u-icon>
          </view>
        </view>

        <view class="imgBox1" @click="chooseMediaFn">
          <u-icon name="photo" size="28" color="#aaaaaa"></u-icon>
          <view>图片/视频</view>
        </view>
      </view>
    </view>
    <view class="buttomBox">
      <u-button @click="submit" shape="circle" text="提交" color="#1676fd"></u-button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { addFiles, getFolderList } from "@/api/cloudStorage";
import { useFilesStore } from "@/stores/files";
import { isImageOrVideo, TanPreviewImage } from "@/utils/commonFn";
import { BASE_CLOUDUPLOADURL } from "@/utils/request";
import { onMounted, ref } from "vue";
const fileList = ref<any[]>([]);
const show = ref(false);
const picList = ref<any[]>([]);
const { filesInfo } = useFilesStore();
onMounted(async () => {
  const res: any = await getFolderList({
    pageSize: 999999,
  });
  fileList.value = [res.rows];
  if (filesInfo) {
    activeInfo.value = filesInfo;
    formData.value.folderId = filesInfo.id;
  } else {
    activeInfo.value = res.rows[0];
    formData.value.folderId = res.rows[0].id;
  }
});
const formData = ref({
  folderId: "",
  fileId: [],
});
const activeInfo = ref();
const selectClick = (info: any) => {
  console.log(info);
  formData.value.folderId = info.value[0].id;
  activeInfo.value = info.value[0];
  show.value = false;
};
const closeFn = (index: number) => {
  picList.value.splice(index, 1);
};
const chooseMediaFn = () => {
  uni.chooseMedia({
    mediaType: ["image", "video"],
    sourceType: ["album", "camera"], //从相册选择或者打开相机
    success: function (res) {
      let tempFilePaths = res.tempFiles;
      console.log(res);
      for (let i = 0, len = tempFilePaths.length; i < len; i++) {
        uni.showLoading({
          title: "加载中",
        });
        uni.uploadFile({
          url: BASE_CLOUDUPLOADURL, //仅为示例，非真实的接口地址
          filePath: tempFilePaths[i].tempFilePath,
          name: "file",
          header: {
            Authorization: uni.getStorageSync("token"),
          },
          success: (uploadFileRes) => {
            console.log(uploadFileRes, "uploadFileRes");
            picList.value.push(JSON.parse(uploadFileRes.data).data);
          },
          complete() {
            //隐藏loading
            uni.hideLoading();
          },
          fail(err) {
            console.log("上传：" + err);
          },
        });
      }
    },
    fail(err) {
      console.log("chooseMedia" + JSON.stringify(err));
    },
  });
};
const showPic = () => {
  if (filesInfo) {
    return;
  }
  show.value = true;
};
const submit = async () => {
  if (picList.value.length <= 0) {
    uni.showToast({
      title: "请上传图片/视频",
      icon: "none",
    });
    return;
  }
  formData.value.fileId = picList.value.map((item) => item.id) as never[];
  await addFiles(formData.value);
  uni.showToast({
    title: "操作成功",
  });
  setTimeout(() => {
    uni.navigateBack();
  }, 200);
};
</script>
<style lang="less" scoped>
.b {
  background: #ffffff;
  margin-top: 20rpx;
  .cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f9f9f9;
    .left {
      image {
        width: 44rpx;
        height: 44rpx;
        margin-right: 15rpx;
      }
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #000000;
    }
    .right {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #aaaaaa;
      image {
        width: 80rpx;
        height: 80rpx;
        margin: 0 20rpx;
        background: saddlebrown;
      }
    }
  }
  .cell2 {
    padding-top: 30rpx;
    font-size: 30rpx;
    color: #3d3d3d;
  }
}
.imgBox {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  .empty {
    width: 31%;
    height: 212rpx;
    border-radius: 8rpx;
    position: relative;
    image,
    video {
      width: 100%;
      height: 100%;
    }
  }
  .closeBox {
    position: absolute;
    right: 5rpx;
    top: 5rpx;
  }
  .imgBox1 {
    width: 31%;
    height: 212rpx;
    border-radius: 8rpx;
    background: #eeeeee;
    font-size: 28rpx;
    color: #aaaaaa;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
</style>
